<template>
  <div class="purchase-content">
    <div class="purchase-title">材料采买确认</div>
    <div class="purchase-list" v-if="purchaseList.length">
      <div class="purchase-item" v-for="(item, index) in purchaseList" :key="item.taskSettingId">
        <div class="purchase-row" @click="toggleSelect(index)">
          <div class="purchase-item__name">{{ item.taskName }}</div>
          <div class="purchase-item__value">
            是否自购
            <svg-icon v-if="!item.isCustomerBuy" style="font-size: 20px; margin-left: 5px" iconClass="inactive-radio" />
            <svg-icon v-else style="font-size: 20px; margin-left: 5px" iconClass="active-radio" />
          </div>
        </div>
        <div class="purchase-item__desc" v-if="item.isCustomerBuy">
          <el-input v-model="item.buyRemark" :rows="3" type="textarea" placeholder="请输入自购说明" />
        </div>
      </div>
    </div>
    <div v-else>
      <el-empty />
    </div>
  </div>
</template>
<script setup>
import { computed } from "vue";

let props = defineProps(["modelValue"]);
let $emit = defineEmits(["update:modelValue"]);

const purchaseList = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    $emit("update:modelValue", val);
  }
});

const toggleSelect = index => {
  purchaseList.value[index].isCustomerBuy = purchaseList.value[index].isCustomerBuy == 1 ? 0 : 1;
};
</script>
<style scoped lang="scss">
@use "@/assets/styles/mixin";
.purchase-content {
  .purchase-title {
    font-size: 18px;
    color: #131414;
    margin-bottom: 15px;
  }
  .purchase-list {
    .purchase-item {
      margin-bottom: 10px;
      .purchase-row {
        background: #f5f7fa;
        display: flex;
        justify-content: space-between;
        padding: 10px 15px;
        cursor: pointer;
      }
      &__name {
        font-size: 14px;
        color: #3d3d3d;
      }
      &__value {
        font-size: 12px;
        color: #4e5969;
        display: flex;
        align-items: center;
      }
      .purchase-item__desc {
        :deep(.el-textarea) {
          .el-textarea__inner {
            background: #eceef1 !important;
            border: none;
            box-shadow: none;
            color: #86909c;
            padding: 10px 15px;
          }
        }
      }
    }
  }
}
</style>
